<template>
  <div class="chart">
    <vab-chart
      :init-options="initOptions"
      :option="option"
      theme="vab-echarts-theme"
    />
  </div>
</template>
<script>
  import VabChart from '@/extra/VabChart'

  export default {
    components: {
      VabChart,
    },
    data() {
      return {
        initOptions: {
          renderer: 'svg',
        },
        option: {
          title: {
            text: 'SRC结果分析',
          },
          legend: {
            data: ['均值'],
          },
          xAxis: {
            data: [],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [],
              type: 'line',
            },
          ],
          tooltip: {
            trigger: 'axis',
          },
        },
      }
    },
    created() {
      const xData = []
      const sData = []

      for (let i = 0; i < 25; i++) {
        xData.push(i + 1)
      }

      for (let i = 0; i < 25; i++) {
        const element = Math.floor(Math.random() * 9 + 1)
        sData.push(element / 10)
      }

      this.option.xAxis.data = xData
      this.option.series = [
        {
          name: '均值',
          data: sData,
          type: 'line',
          markPoint: {
            data: [
              { type: 'max', name: 'Max' },
              { type: 'min', name: 'Min' },
            ],
          },
        },
      ]
    },
  }
</script>
<style lang="scss" scoped>
  :deep() {
    .chart {
      .echarts {
        width: 100%;
        height: 200px;
      }
    }
  }
</style>
